<script setup lang="ts">
import {getImage} from "@/utils";
import {onMounted, reactive, ref, watch} from "vue";
import useAdmin from "@/store/modules/admin.ts";
import useSettingStore from "@/store/modules/setting.ts";
import {type FormInstance} from "element-plus";
import Upload from "@/components/Upload/index.vue";
import type {TAdminInfo} from "@/api/admin/type.ts";
const dialogVisible = ref(false);
const adminStore = useAdmin();
const formRef = ref<FormInstance>();
const settingStore = useSettingStore();
type TAdminParams = {
    avatar:string
}
const adminForm = reactive<TAdminParams>({
    avatar:""
})
const submitForm = function(){
    formRef.value?.validate(async (valid) => {
        if (valid) {
            console.log("success")
        }
    })
}
watch(()=>adminForm.avatar,()=>{
    formRef.value?.validate()
})
// const getAdminList = function(currentPage:number=0){
//     adminStore.getSysAdminListAsync(currentPage)
// }
const handleSelectionChange = function(row:TAdminInfo[]){
    console.log(1111111,row.map((item:TAdminInfo)=>item._id))
}
onMounted(()=>{
    adminStore.getSysAdminListAsync()
})
</script>

<template>
    <el-card>
        <el-button @click="dialogVisible=true">添加医院用户</el-button>
    </el-card>
    <el-table row-key="_id" border :data="adminStore.adminList"
              @selection-change="handleSelectionChange"
              style="width: 100%;margin-top:5px;height:calc(100vh - 215px) ">
        <el-table-column type="selection"  width="55" />
        <el-table-column prop="name" label="管理员账号" min-width="150"/>
        <el-table-column label="头像" min-width="150">
            <template #default="scope">
                <el-image
                    :preview-teleported="true"
                    style="width: 50px; height: 50px;"
                    :src="getImage(scope.row.avatar)"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[getImage(scope.row.avatar)]"
                    :initial-index="4"
                    fit="cover"

                />
            </template>
        </el-table-column>
    </el-table>
    <el-card style="margin-top:5px;">
        <el-row justify="center">
            <el-pagination background layout="total,prev, pager, next"
                           @update:current-page="adminStore.getSysAdminListAsync"
                           :current-page="settingStore.pageInfo.pageNo"
                           :page-size="settingStore.pageInfo.pageSize"
                           :total="settingStore.pageInfo.total" />
        </el-row>

    </el-card>



    <el-dialog
        v-model="dialogVisible"
        title="添加权限'"
        width="500"
        :close-on-click-modal="false"
        :show-close="false"
    >
        <el-form
            ref="formRef"
            v-if="dialogVisible"
            style="max-width: 600px"
            :model="adminForm"
            label-width="auto"
            class="demo-dynamic"
        >
            <el-form-item prop="avatar" label="头像：" :rules="[{
                        required: true,
                        message: '请选择头像',
                        trigger: 'blur',
                    }
                  ]"
            >
                <Upload v-model="adminForm.avatar" :width="150" :height="150"/>

            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
